<template>
    <div class="common-layout" style="background-color: white " v-if="(props.data.id != '-1')">
        <RouterLink :to="{ name: 'blogView', query: { id: props.data.id } }">{{ props.data.blogName }}</RouterLink>
        <div style="display: flex;">
            <el-avatar :size="50" :src="props.data.userDetails.url" @click="PushUserPage" style="cursor: pointer;" />
            <p>{{ props.data.brief }}</p>
        </div>
        <div style=" display: flex;">
            <!-- <RouterLink to="/" active-class="active" style="display:flex;align-items: center;">{{
                props.data.userDetails.acName }}
            </RouterLink> -->

            <el-text class="mx-1" @click="PushUserPage" style="cursor: pointer;color: blue">{{
                props.data.userDetails.acName
            }}</el-text>
            <p>{{ props.data.createTime }}</p>
            <div style="display:flex;align-items: center;">
                <el-link :style="LikeLinkStyle" @click="LikeLink" :underline="false">点赞{{ props.data.blogLikes
                    }}</el-link>
                <el-text :style="LikeLinkStyle">评论{{ props.data.commentNum
                    }}</el-text>
                <el-text :style="LikeLinkStyle"> 阅读量{{
                    props.data.views
                }} </el-text>

                <el-dialog v-model="CollectionVisiable" title="收藏博客" width="500px">
                    <div style="display:flex;">
                        <el-text class="mx-1;" style="font-size: 16px;">选择收藏夹：</el-text>
                        <el-select v-model="collectionOptionValue" value-key="id" placeholder="Select"
                            style="width: 240px">
                            <el-option v-for="item in collectionOptions" :key="item.id" :label="item.collectionName"
                                :value="item" />
                            <template #footer>
                                <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
                                    新建收藏夹
                                </el-button>
                                <template v-else>
                                    <el-input v-model="newCollectionName" class="option-input" placeholder="创建新收藏夹"
                                        size="small" />
                                    <div style="margin-top: 10px">
                                        <el-button type="primary" size="small" @click="onConfirm">
                                            confirm
                                        </el-button>
                                        <el-button size="small" @click="clear">cancel</el-button>
                                    </div>
                                </template>
                            </template>
                        </el-select>
                        <el-button style="margin-left: 10%;" @click="AddBlogToColletion">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import axios from 'axios'
import { IsLoginIn } from '../functions/IsLoginIn.vue';
import { useRouter } from 'vue-router'; // 引入路由
import userImage from '@/assets/userImage.png'

const router = useRouter();

const props = defineProps({
    data: {
        type: Object,
        default: () => ({
            blogName: '默认博客名称', // 为 blogName 属性设置默认值
            brief: '默认博客摘要',
            id: '-1',
            createTime: '2024-07-12 14:44:53',
            userDetails: {
                id: '-1',
                acName: "MOKIRU",
                url: "./image/202407/-12afe970db7549f18f1e680e7c4797ac.png",
            },
            blogLikes: 0,
            blogStars: 0,
            views: 0,
            commentNum: 0
        })
    }
});

const collectionOptionValue = ref('');

const LikeLinkStyle = ref({
    color: 'grey' // 直接使用对象语法
});

const ColletionLinkStyle = ref({
    color: 'grey' // 直接使用对象语法
});

const collectionOptions = ref([]);

const CollectionVisiable = ref(false);

const isAdding = ref(false)

const newCollectionName = ref('')

function PushUserPage() {
    // console.log(props.data);
    router.push({ path: '/user', query: { id: props.data.userDetails.id } });
}

const onAddOption = () => {
    isAdding.value = true
}

const onConfirm = () => {
    if (newCollectionName.value) {
        axios
            .post('/api/collection/create', {
                collection_name: newCollectionName,
            }, {
                headers: {
                    'HOSHINO_T_KK': localStorage.getItem('userToken'),
                }
            })
            .then(response => {
                console.log(response);
                axios
                    .post('/api/collection/getUserCollection', {
                        user_id: localStorage.getItem('userId')
                    }, {
                        headers: {
                            'HOSHINO_T_KK': localStorage.getItem('userToken'),
                        }
                    })
                    .then(response => {
                        console.log(response);
                        collectionOptions.value = response.data.data;
                        console.log(collectionOptions.value);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
        clear()
    }
}

const clear = () => {
    newCollectionName.value = ''
    isAdding.value = false
}

function CollectionLink() {

}

function LikeLink() {
    IsLoginIn();
    if (LikeLinkStyle.value.color == "grey") {
        LikeLinkStyle.value = { color: "blue" };
        axios
            .post('/api/blogLike/add', {
                blog_id: props.data.id,
            }, {
                headers: {
                    'HOSHINO_T_KK': localStorage.getItem('userToken'),
                }
            })
            .then(response => {
                console.log(response);
                props.data.blogLikes++;
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
    }
    else {
        LikeLinkStyle.value = { color: "grey" };
        axios
            .post('/api/blogLike/del', {
                blog_id: props.data.id,
            }, {
                headers: {
                    'HOSHINO_T_KK': localStorage.getItem('userToken'),
                }
            })
            .then(response => {
                console.log(response);
                props.data.blogLikes--;
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
    }

    console.log(LikeLinkStyle.value.color);
}

function GetCollectionOptions() {
    IsLoginIn();
    if (LikeLinkStyle.value.color == "grey") {
        CollectionVisiable.value = !CollectionVisiable.value;
        axios
            .post('/api/collection/getUserCollection', {
                user_id: localStorage.getItem('userId')
            }, {
                headers: {
                    'HOSHINO_T_KK': localStorage.getItem('userToken'),
                }
            })
            .then(response => {
                console.log(response);
                collectionOptions.value = response.data.data;
                console.log(collectionOptions.value);
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
    }
}

function AddBlogToColletion() {
    // console.log(collectionOptionValue);
    LikeLinkStyle.value.color = "blue";
    axios
        .post('/api/collection/addBlogIn', {
            blog_id: props.data.id,
            collection_id: collectionOptionValue.value.id
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            props.data.blogStars++;
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

onMounted(() => {
    // console.log(LikeLinkStyle.value);
})
</script>

<style scoped>
.el-link {
    user-select: none;
    text-decoration: none;
}

a {
    text-decoration: none;
}
</style>
